<template>
    <view class="container orderdetails">
        <uni-search-bar bgColor="#fff" @confirm="search" :focus="true" v-model="keyword"
        @cancel="scancelearch" @clear="search"></uni-search-bar>
        <uni-card class="order" v-for="(item,index) in lists" :key="index">
            <view slot="title">
                <view class="order-header">
                    <view class="ordersn">
                    {{item.order_sn}}
                        <template v-if="item.typec == 1">
                            (正单订单)
                        </template>
                        <template v-else-if="item.typec == 2">
                            (补单订单)
                        </template>
                        <template v-else-if="item.typec == 3">
                            (维修订单)
                        </template>
                    </view>
                    <view class="timer">
                        <uni-icons custom-prefix="iconfont" type="icon-shizhong" size="20"></uni-icons>
                        {{item.update_time}}
                    </view>
                </view>
                
            </view>
            <view class="content">
                <view class="goods_name justify-between">
                    <view class="title">{{item.project_name}}</view>
                    <template v-if="item.is_edit">
                        <view class="status_name status_0">
                            {{item.status_name}}
                        </view>
                    </template>
                    <view  v-else class="status_name" :class="'status_'+item.status">{{item.status_name}}</view>
                </view>
                <view class="skulist">
                    <view><uni-icons class="icon" type="person-filled" size="20"></uni-icons>&nbsp; {{item.username}}</view>
                    <view @click="callphone(item.phone)"><uni-icons class="icon" type="phone-filled" size="20"></uni-icons>&nbsp; <text class="phone">{{item.phone}}</text></view>
                    <view><uni-icons class="icon" type="location-filled" size="20"></uni-icons>&nbsp;{{item.address}}</view>
                    <view><uni-icons class="icon" type="calendar" size="20"></uni-icons>&nbsp;工期：{{item.be_endtime}}</view>
                    <view><uni-icons class="icon" type="flag-filled" size="20"></uni-icons>&nbsp;进度：{{item.total_progress}}%</view>
                </view>
            </view>
            <view slot="actions" class="justify-between footers">
                <view class="user">
                    <view class="headimg">
                        <image :src="item.client.headimg" v-if="item.client.headimg" mode="widthFix"></image>
                        <image src="../../static/logo.png" v-else mode="widthFix"></image>
                    </view>
                    <view class="nickname">{{item.client.username}}</view>
                </view>
                <view class="action justify-around">
                    <button type="primary" size="mini" @click="selone(item)">选择</button>
                </view>
            </view>
        </uni-card>
        <view class="more">
            <template v-if="page<last_page">
                加载更多~
            </template>    
            <template v-else>
                没有更多了~
            </template>
        </view>  
    </view>
</template>

<script>
export default{
    name:"selorderlist",
    data(){
        return{
            lists:[],
            page:1,
            last_page:1,
            status:-1,
            keyword:'',
            issel:1
        }
    },
    onPullDownRefresh(){
        this.page = 1
        this.keyword = ''
        this.getlists()
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 500);
    },
    onReachBottom(){
        if(this.page<this.last_page){
            this.page ++ 
            this.getlists()
        }
    },
    onLoad(option){
        
        
    },
    onShow(){
      this.page = 1
      this.lists = []  
      this.$msgNum()
      this.getlists()
    },
    methods:{
        selone(item){
            uni.$emit('orderinfo', {
                oid:item.id,
                project_name:item.project_name,
                address:item.address,
                username:item.username,
                phone:item.phone,
                client_name:item.client.username
            })
            uni.navigateBack({
                delta: 1
            })
         
        },
        scancelearch(){
            this.keyword = ''
            this.search()
        },
        search(){
            this.page = 1
            this.lists = []
            this.getlists()
        },
        getlists(){
            this.$api.get(`order/orderlist?status=${this.status}&keyword=${this.keyword}`).then(({data})=>{
                this.last_page = data.last_page
                this.lists = this.lists.concat(data.data)
            })
        },
    }
}
</script>

<style lang="less" scoped>
    .icon{
        margin-right: 10rpx;
    }
    .phone{
        color: #2979ff;
    }
    .order{
        .order-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80rpx;
            border-bottom: 1px solid #e9e9eb;
            .ordersn{
                color: #000;
                font-weight: 600;
            }
            .timer{
                font-size: 26rpx;
                color: #3a3a3a;
                display: flex;
                align-items: center;
            }
        }
        .content{
            .goods_name{
                height: 60rpx;
                .title{
                    font-weight: bold;
                }
                .status_name{
                    
                }
            }
        }
        .footers{
            height: 80rpx;
           .user{
               display: flex;
               align-items: center;
              .headimg{
                  width: 60rpx;
                  height: 60rpx;
                  margin-right: 10rpx;
                  image{
                      width: 60rpx;
                      height: 60rpx;
                      border-radius: 50%;
                  }
              } 
           }
            .action{
                align-items: center;
                button{
                    height: 60rpx;
                    margin: 0 10rpx;
                }
            } 
        }
    
    }
    
</style>